<ng-template #defaultItemTemplate let-formatter="formatter" let-item="item">
  {{formatter(item)}}
</ng-template>

<div class="drop{{direction}} select-container">
  <div class="input-group select-panel" [ngClass]="{disabled: disabled}" (click)="onPopupToggle()">
    <input type="text" class="form-control select-control" [disabled]="disabled" readonly="readonly" unselectable="on"
           [placeholder]="placeholder" [(ngModel)]="selectedText" (ngModelChange)="onSelectedChange($event)"/>
    <div class="input-group-addon" [ngClass]="{disabled: disabled}">
      <i class="select-down-icon {{iconDown}}" [@arrowState]="arrowState"></i>
    </div>
  </div>
  <div class="dropdown-menu" [style.display]="isPopup ? 'block' : 'none'">
    <ul class="list-unstyled popup-list">

      <ng-container *ngFor="let item of options; let $index = index;">
        <li *ngIf="item.group" class="dropdown-header">{{item.group?.group}}</li>
        <li *ngIf="!item.group" class="dropdown-item"
            [ngClass]="{'item-hoverd bg-primary': $index == activeIndex, selected: selectedItem == item}"
            (click)="onSelectedChange(item)"
            (mouseenter)="onActiveIndexChange($index)">
          <ng-template [ngTemplateOutlet]="itemTemplate || defaultItemTemplate"
                       [ngTemplateOutletContext]="{ formatter: formatter, selectedItem:selectedItem, selectedText:selectedText, options:options, item:item, $index:$index}"></ng-template>
        </li>
      </ng-container>
    </ul>
  </div>
</div>
